<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .head{
            width: 123px;
            height: 140px;
            border: 1px solid #000;
            margin: 0 auto;
        }

        .text{
            width: 200px;
            height: 50px;
            border: 1px solid #000;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        body{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="text"></div>
    <input type="button" value="baby">
    <input type="button" value="hxm">
    <input type="button" value="lh">

    <script>
        var head = document.querySelector(".head");
        var text = document.querySelector(".text");
        var buttonArr = document.querySelectorAll("input");
        console.log(buttonArr.length)

        for(var i=0;i<buttonArr.length;i++){
             //ajax post提交方式
            buttonArr[i].onclick =function () {
//                 var ajaxPost = new XMLHttpRequest();
//                 ajaxPost.open('post','PostTestPhp.php');
//     //           如果post提交需要传值得话一定要添加下面这条语句
//                 ajaxPost.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//     //            post方式提交入如果有参数直接在send方法中传入拼接好的字符串
//                 ajaxPost.send('image=' + this.value);
//                 ajaxPost.onreadystatechange = function () {
//                     if(ajaxPost.readyState == 4 && ajaxPost.status == 200) {
////                         console.log(ajaxPost.responseText);
//                         var arrSplit = ajaxPost.responseText.split("|");
//                         head.style.background = 'url(image/'+ arrSplit[0] +') no-repeat center / cover'
//                         text.innerHTML = arrSplit[1];
//                     }
//                 };

//                其他测试
//                TODO cover是背景图片覆盖盒子，而contain则是包含在盒子内部，所以一般建议使用cover
                    head.style.background = 'url(image/'+ this.value +'.jpg) no-repeat center / cover';
                    text.innerHTML = this.value;
             };
        };
    </script>
</body>
</html>